<template>
	<van-tabbar v-model="active" fixed placeholder active-color="#1E8FA0" route replace>
		<van-tabbar-item v-for="(item, index) in tabbarData" :key="index" :to="item.path">
			{{ item.title }}
			<template #icon="props">
				<img :src="props.active ? item.activeIcon : item.icon" />
			</template>
		</van-tabbar-item>
	</van-tabbar>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";

const active = ref(0);
const tabbarData = reactive([
	{
		icon: new URL("../../assets/images/tabbar/week.png", import.meta.url).href,
		activeIcon: new URL("../../assets/images/tabbar/week-active.png", import.meta.url).href,
		title: "工作周报",
		path: "/weeklyReport"
	},
	// {
	// 	icon: new URL("../../assets/images/tabbar/monthly.png", import.meta.url).href,
	// 	activeIcon: new URL("../../assets/images/tabbar/monthly-active.png", import.meta.url).href,
	// 	title: "工作月报",
	// 	path: "/monthlyReport"
	// },
	{
		icon: new URL("../../assets/images/tabbar/workHours.png", import.meta.url).href,
		activeIcon: new URL("../../assets/images/tabbar/workHours-active.png", import.meta.url).href,
		title: "工时填报",
		path: "/workHours"
	}
]);
</script>
